<template>
	<view class="container">
		<view class="cut"></view>
		<view class="wrapper">
			<view class="tit">服务站编号</view>
			<input class="inp mon" type="text" v-model="service_code" placeholder="请输入服务站编号" placeholder-style="font-weight:normal;font-size: 40rpx;"
			 @input="change" />
		</view>
		<view class="cut"></view>
		<view class="referees" v-if="info.name">
			<text class="tit">业务联系人信息</text>
			<text class="name">姓名：{{info.name}}</text>
			<text class="name">电话：{{info.phone}}</text>
			<text class="phone">所属服务站：{{info.agent_name}}</text>
		</view>
		<view class="btn" @tap="submit">下一步</view>
		<view class="contact">
			<image src="../../../static/images/mall/hotline.png" mode=""></image>
			<text @tap="phoneCall">联系客服</text>
		</view>
	</view>
</template>

<script>
	import {
		takeServiceStation
	} from "@/api/user.js"
	export default {
		data() {
			return {
				service_code: "",
				item: {},
				info: {
					name: "",
					phone: "",
					agent_name: ""
				}
			}
		},
		onLoad(option) {
			this.item = JSON.parse(decodeURIComponent(option.item))
		},
		methods: {
			change(e) {
				takeServiceStation({
					service_code: e.target.value
				}).then(res => {
					if (res.data.stationInfo) {
						this.info = res.data.stationInfo
					} else {
						this.info = {
							name: "",
							phone: "",
							agent_name: ""
						}
					}
				})
			},
			phoneCall() {
				uni.makePhoneCall({
					phoneNumber: uni.getStorageSync("siteSerPhone")
				})
			},
			submit() {
				if (!this.service_code) {
					return uni.showToast({
						icon: "none",
						title: "请输入服务站编号"
					})
				}
				if (!this.info.name) {
					return uni.showToast({
						icon: "none",
						title: "服务站编号不存在，请重新输入"
					})
				}
				uni.redirectTo({
					url: "./pickCardStep?item=" + encodeURIComponent(JSON.stringify(this.item)) + "&info=" + encodeURIComponent(JSON.stringify(
						this.info))
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: #fafafa;
	}
</style>
<style lang="scss" scoped>
	.container {
		.cut {
			width: 750rpx;
			height: 24rpx;
			background: #fafafa;
		}

		.wrapper {
			background-color: #fff;
			padding: 40rpx 30rpx;

			.tit {
				font-size: 28rpx;
				color: rgba(51, 51, 51, 1);
				margin-bottom: 20rpx;
			}

			.inp {
				height: 90rpx;
				line-height: 90rpx;
				font-size: 60rpx;
				font-weight: bold;
				border-bottom: 1rpx #eee solid;
			}
		}
	}

	.referees {
		background-color: #fff;
		padding: 30rpx;
		border-radius: 8rpx;
		color: #333;
		display: flex;
		flex-direction: column;

		.tit {
			font-size: 28rpx;
		}

		.name,
		.phone {
			margin-top: 20rpx;
			font-size: 30rpx;
			font-weight: bold;

			&:before {
				margin-right: 10rpx;
				content: '·';
				font-weight: bold;
				color: #FACF3C;
			}
		}
	}

	.contact {
		display: flex;
		justify-content: center;
		padding: 30rpx;

		image {
			width: 40rpx;
			height: 41rpx;
			margin-right: 14rpx;
		}

		text {
			font-size: 32rpx;
			color: #666;
		}
	}

	.btn {
		margin: 80rpx auto 30rpx;
		width: 600rpx;
		height: 80rpx;
		border-radius: 40rpx;
		background: linear-gradient(90deg, #FBCC2B 0%, #FBDC72 100%);
		font-size: 32rpx;
		font-weight: 500;
		color: #333;
		line-height: 80rpx;
		text-align: center;
	}
</style>
